<template>
	<div>
		<el-container class="container">
			<!-- 头部区域 -->
			<el-header height="70px">
				<el-row>
					<!-- 左侧系统名称 -->
					<el-col :span="12">
						<p class="title">后台管理系统</p>
					</el-col>
					<!-- 右侧管理员信息 -->
					<el-col :span="12">
						<el-row type="flex" justify="end" align="middle" style="height: 100%;">
							<el-avatar src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
							<el-dropdown @command="handleCommand" style="margin-left: 10px;">
								<span class="el-dropdown-link">
									{{manager.username}}<i class="el-icon-arrow-down el-icon--right"></i>
								</span>
								<template #dropdown>
									<el-dropdown-menu>
										<el-dropdown-item command="updateInfo">修改信息</el-dropdown-item>
										<el-dropdown-item command="updatePassword">修改密码</el-dropdown-item>
										<el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
									</el-dropdown-menu>
								</template>
							</el-dropdown>
						</el-row>
					</el-col>
				</el-row>
			</el-header>
			<!-- 侧边菜单栏和主内容区 -->
			<el-container>
				<!-- 侧边菜单栏 -->
				<el-aside width="200px">
					<el-menu background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
						<el-menu-item index="1" @click="handleCarManage()">
							<i class="el-icon-menu"></i>
							<span>车辆管理</span>
						</el-menu-item>
						<el-menu-item index="2" @click="handleShopManage()">
							<i class="el-icon-s-shop"></i>
							<span>商家管理</span>
						</el-menu-item>
						<el-menu-item index="3" @click="handleUserManage()">
							<i class="el-icon-user-solid"></i>
							<span>用户管理</span>
						</el-menu-item>
						<!-- 子菜单 -->
						<el-submenu index="4">
							<template #title>
								<i class="el-icon-s-tools"></i>
								<span>平台管理</span>
							</template>
							<el-menu-item index="4-1" @click="handleCarouselManage()">
								<i class="el-icon-s-platform"></i>
								<span>轮播图管理</span>
							</el-menu-item>
							<el-menu-item index="4-2" @click="handleRecommendManage()">
								<i class="el-icon-s-claim"></i>
								<span>推荐管理</span>
							</el-menu-item>
						</el-submenu>
						<!-- 子菜单 -->
						<el-submenu index="5">
							<template #title>
								<i class="el-icon-s-data"></i>
								<span>系统日志</span>
							</template>
							<el-menu-item-group>
								<el-menu-item index="5-1" @click="handleShopLog()">
									<i class="el-icon-setting"></i>
									<span>商家日志</span>
								</el-menu-item>
								<el-menu-item index="5-2" @click="handleUserLog()">
									<i class="el-icon-setting"></i>
									<span>用户日志</span>
								</el-menu-item>
							</el-menu-item-group>
						</el-submenu>
					</el-menu>
				</el-aside>
				<!-- 主内容区 -->
				<el-main>
					<div v-show="welcome">
						<h1 style="padding-top: 100px; font-size: 30px;">欢迎来到商家后台管理系统</h1>
					</div>
					<router-view />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				welcome: true, //进入主页的显示文字
				//管理员
				manager: {}
			}
		},
		mounted() {
			if (this.$route.path === '/home') {
				this.welcome = true
			} else {
				this.welcome = false
			}
			this.manager = this.$cookies.get("manager")
		},
		methods: {
			//车辆管理
			handleCarManage() {
				this.welcome = false
				if (!(this.$route.path === '/home/usedcar')) {
					this.$router.push("/home/usedcar")
				}
			},
			//商家管理
			handleShopManage() {
				this.welcome = false
				if (!(this.$route.path === '/home/seller')) {
					this.$router.push("/home/seller")
				}
			},
			//用户管理
			handleUserManage() {
				this.welcome = false
				if (!(this.$route.path === '/home/user')) {
					this.$router.push("/home/user")
				}
			},
			//轮播图管理
			handleCarouselManage() {
				this.welcome = false
				if (!(this.$route.path === '/home/platform/carousel')) {
					this.$router.push("/home/platform/carousel")
				}
			},
			//推荐管理
			handleRecommendManage() {
				this.welcome = false
				if (!(this.$route.path === '/home/platform/recommend')) {
					this.$router.push("/home/platform/recommend")
				}
			},
			//商家日志
			handleShopLog() {
				this.welcome = false
				console.log("商家日志")
				if (!(this.$route.path === '/home/log/seller')) {
					this.$router.push("/home/log/seller")
				}
			},
			//用户日志
			handleUserLog() {
				this.welcome = false
				console.log("用户日志")
				if (!(this.$route.path === '/home/log/user')) {
					this.$router.push("/home/log/user")
				}
			},
			//头部右侧下拉菜单
			handleCommand(command) {
				//修改管理员信息
				if (command === "updateInfo") {
					console.log(command)
				}
				//修改管理员密码
				if (command === "updatePassword") {
					console.log(command)
				}
				//退出登录
				if (command === "logout") {
					let _this = this;
					_this.$axios({
						method: 'post',
						url: '/manager/logout',
						data: {
							id: _this.manager.id
						}
					}).then((resp) => {
						if (resp.code == 200) {
							_this.$message.success(resp.msg)
							this.$cookies.remove("manager")
							this.$router.replace('/login')
						} else {
							_this.$message.error(resp.msg)
						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	.container {
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
	}

	/* 头部 */
	.el-header {
		background-color: #B3C0D1;
		line-height: 60px;
	}

	/* 侧边栏菜单 */
	.el-aside {
		background-color: #D3DCE6;
	}

	/* 主内容区域 */
	.el-main {
		background-color: #E9EEF3;
		text-align: center;
		padding: 0px;
	}

	/* 头部平台文字 */
	.title {
		margin: 0px 0px;
		font-size: 25px;
		color: #aaffff
	}
</style>
